<template>
  <div class="box">
    <div class="title">
      <p>男女比例</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="sex">
      <div class="man">
        <p>男生</p>
        <img src="../../images/man.png" alt="" />
      </div>
      <div class="women">
        <p>女生</p>
        <img src="../../images/woman.png" alt="" />
      </div>
    </div>
    <div class="rate">
      <p>男生58%</p>
      <p>女生42%</p>
    </div>
    <!-- 展示图表 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts" name="Sex">
// 引入echarts
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

// 获取dom元素
let charts = ref()

// 组件挂载完毕展示图表
onMounted(() => {
  // 初始化eCharts实例对象
  let myCharts = echarts.init(charts.value)
  // 设置配置项
  myCharts.setOption({
    // 标题组件
    /* title: {
      text: '男女比例', // 主标题
      left: '40%', // 标题位置
      textStyle: {
        color: 'skyblue', // 主标题颜色
        fontSize: '16px', // 主标题字体大小
      },
    }, */
    // x|y轴组件
    xAxis: {
      show: false, // 不显示x轴
      // type:'category' // 在x轴上均匀分布
      min: 0, // x轴最小值
      max: 100, // x轴最大值
    },
    yAxis: {
      show: false, // 不显示y轴
      type: 'category', // 在y轴上均匀分布
    },
    // 系列
    series: [
      // 男生柱条
      {
        type: 'bar', // 柱状图
        data: [58], // 数据
        barWidth: 20, // 柱状图宽度
        z: 100, // 柱条层级，值越大越靠上
        // 柱条样式
        itemStyle: {
          borderRadius: 20, // 圆角
        },
      },
      // 女生柱条
      {
        type: 'bar', // 柱状图
        data: [100], // 数据
        barWidth: 20, // 柱状图宽度
        // 调整女生柱条的位置，使其覆盖到男生柱条上，实现重叠覆盖效果
        barGap: '-100%',
        // 柱条样式
        itemStyle: {
          color: 'pink',
          borderRadius: 20, // 圆角
        },
      },
    ],
    // 布局
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
    },
  })
})
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-lt.png) no-repeat;
  background-size: 100% 100%;
  margin: 15px 0;
  .title {
    margin-left: 20px;
    p {
      font-size: 20px;
      color: white;
    }
  }
  .sex {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .man {
      margin-top: 20px;
      width: 111px;
      height: 115px;
      background: url(../../images/man-bg.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        margin-top: 10px;
      }
    }
    .women {
      margin-top: 20px;
      width: 111px;
      height: 115px;
      background: url(../../images/woman-bg.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        margin-top: 10px;
      }
    }
    p {
      font-size: 20px;
      text-align: center;
      margin-top: -15px;
      margin-bottom: 10px;
      color: white;
    }
  }
  .rate {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    color: white;
    p {
      font-size: 18px;
    }
  }
  .charts {
    height: 60px;
  }
}
</style>
